<!-- 调拨记录 -->
<template>
    <div class=''>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable" 
        :exportBtn="true"  @exportHandler="exportHandler">
            <el-form-item label="转账类型">
                <el-select v-model="formInline.type" placeholder="选择转账类型">
                    <el-option v-for="(item, index) in transferTypeList" :key="item + '_' + index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
        </CustomForm>
        <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '100%' }"></CustomDescriptions>
        <el-table :data="list" style="width: 100%;margin-top: 50px;" height="530" v-loading="tableloading">
            <el-table-column prop="id" label="ID" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="source" label="来源账户" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="target" label="目标账户" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="yund_id" label="运单ID" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="转账类型" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1" style="color: red;">下拨</span>
                    <span v-else-if="scope.row.type == 2" style="color: blue;">上拨</span>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="转账金额" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="add_time" label="转账时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="pageInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getAccountAccount } from '@/api/moneyManagment'
import { getToken} from '@/utils/auth';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['row'],
    data() {
        //这里存放数据
        return {
            list: [],
            total: 0,
            tableloading: false,
            pageInfo: {
                page: 1,
                pageSize: 10
            },
            formInline: {
                time: '',
                page: 1,
                pageSize: 10,
                type: '0',
            },
            pickerDateArr:null,
            transferTypeList:[
                {value:'0',label:'全部'},
                {value:'1',label:'下拨'},
                {value:'2',label:'上拨'},
            ],
            descriptionsData: [
                {
                    label: "总订单数",
                    count: 0,
                    unit: "(单)"
                },
                {
                    label: "总金额",
                    count: 0,
                    unit: "(元)"
                },
    
            ],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async getAccountAccount() {
            this.tableloading = true;
            let res = await getAccountAccount({
                bank_sub_account: this.row.account,
                ...this.formInline
            })
            if (res.code == 200) {
                this.list = res.data ? res.data.data : [];
                this.total = res.data ? res.data.total : 0;
                this.descriptionsData[0].count = res.data.total;
                this.descriptionsData[1].count = res.extra;
            }
            this.tableloading = false;
        },
        handleSizeChange(pageSize) {
            this.formInline.pageSize = pageSize;
            this.formInline.page = 1;
            this.getAccountAccount();
        },
        handleCurrentChange(page) {
            this.pageInfo.page = page;
            this.getAccountAccount();
        },
        changeDatePicker(data) {
            if (data) {
                this.formInline.time = data.join(' - ');
            } else {
                this.formInline.time = "";
            }
            this.page = 1;
            // this.getHapproveList();
        },
        onSubmit() {
            this.formInline.page = 1;
            this.getAccountAccount();
        },
        resetTable() {
            this.formInline = {
                time: '',
                type: '0',
                pageSize: 10,
                page: 1,
            };
            this.pickerDateArr = null;
            this.getAccountAccount();
        },
        exportHandler(){
            window.open(`https://api.zhgylgl.com/api/admin/accountExport?bank_sub_account=${this.row.bank_sub_account}&time=${this.formInline.time}&time=${this.formInline.time}&type=${this.formInline.type}&token=${getToken()}`, '_blank', '');
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getAccountAccount();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类</style>